<template>
    <div class="content">
        <div class="title">企业签到</div>
        <div class="w-100 form">
            <ul class="lists" ref="inputs">
                <li class="list" :class="{ active: intputText[0], blink: intputText.length === 0 }">{{ intputText[0] }}</li>
                <li class="list" :class="{ active: intputText[1], blink: intputText.length === 1 }">{{ intputText[1] }}</li>
                <li class="list" :class="{ active: intputText[2], blink: intputText.length === 2 }">{{ intputText[2] }}</li>
                <li class="list" :class="{ active: intputText[3], blink: intputText.length === 3 }">{{ intputText[3] }}</li>
                <li class="list" :class="{ active: intputText[4], blink: intputText.length === 4 }">{{ intputText[4] }}</li>
                <li class="list" :class="{ active: intputText[5], blink: intputText.length === 5 }">{{ intputText[5] }}</li>
                <!--    覆盖在li上面的的input, 点击li实则是在进行input输入-->
            </ul>
            <input type="tel" class="list-input" maxlength="6" v-model="intputText" />
            <Button @click="handleSubmit" type="primary" class="button">立即签到</Button>
        </div>
        <div class="footer">
            <!--            河南省高校毕业生网上签约与毕业去向登记平台-->
        </div>

        <transition name="slide-fade">
            <div class="message" :class="[messageBoxStatus ? 'success' : 'error']" v-show="messageBoxShow">{{ messageBoxText }}</div>
        </transition>
    </div>
</template>

<script>
import { signInSubmit } from '../../api/signIn';
import crypto from '@/libs/secret';

export default {
    data() {
        return {
            intputText: '',
            messageBoxText: '', // or ❌签到失败
            messageBoxStatus: true, // true: 签到成功  false: 签到失败
            messageBoxShow: false
        };
    },
    mounted() {
        console.log(this);
        document.body.addEventListener('focusin', () => {
            if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {
                // 软键盘收起的事件处理
                setTimeout(() => {
                    document.getElementsByTagName('body')[0].className = 'inTouch';
                }, 100);
            }
        });
        document.body.addEventListener('focusout', () => {
            if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {
                // 软键盘收起的事件处理
                setTimeout(() => {
                    const scrollHeight = document.documentElement.scrollTop || document.body.scrollTop || 0;
                    window.scrollTo(0, Math.max(scrollHeight - 1, 0));
                    document.getElementsByTagName('body')[0].className = 'noTouch';
                }, 100);
            }
        });
    },
    methods: {
        handleSubmit() {
            if (!this.intputText || this.intputText === '' || this.intputText === ' ') {
                this.showMessage(false, '签到码不能为空');
                return;
            }
            debugger;
            signInSubmit({
                signInCode: this.intputText
            })
                .then(res => {
                    if (res.code === 200) {
                        console.log(res);
                        this.$router.push({ name: 'showCompanyInfo', params: { myObject: res.result } });
                        // this.showMessage(true, res.result);
                    } else {
                        this.showMessage(false, res.message);
                        if (res.message === '已签到，请勿重复签到') {
                            let result = JSON.parse(crypto.decrypt(res.result));
                            console.log(result);
                            this.$router.push({ name: 'showCompanyInfo', params: { myObject: result } });
                        }
                    }
                })
                .catch(err => {
                    this.showMessage(false, err);
                    this.$router.push({
                        name: 'showCompanyInfo',
                        params: {
                            id: id
                        }
                    });
                });
        },
        showMessage(status, msg) {
            this.messageBoxStatus = status;
            this.messageBoxShow = true;
            if (status) {
                this.messageBoxText = '🎉   签到成功';
            } else {
                this.messageBoxText = '❌   签到失败：' + msg;
            }
            setTimeout(() => {
                this.messageBoxShow = false;
            }, 2000);
        }
    }
};
</script>

<style lang="less" scoped>
.content {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: start;
    align-items: center;
    overflow: hidden;
    background: url(images/bg.png);
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    flex-direction: column;

    .ivu-btn-primary {
        background-color: #497bea !important;
    }

    .lists {
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: relative;
        width: 85%;
        margin: 0 auto;
    }

    .list-input {
        position: relative;
        left: 0;
        top: -1.2rem;
        height: 1.4rem;
        width: 100%;
        opacity: 0;
    }

    .list {
        width: 1rem;
        height: 1.2rem;
        line-height: 1.1rem;
        font-size: 0.75rem;
        font-weight: bold;
        background: #e6f7f7;
        border-radius: 0.2rem;
        border: 0.02rem solid transparent;
        text-align: center;
    }

    .list.active {
        border-color: #03a6a0;
    }

    .message {
        position: fixed;
        display: flex;
        padding-left: 0.25rem;
        padding-right: 0.25rem;
        height: 0.75rem;
        border-radius: 0.1rem;
        top: 0.5rem;
        font-size: 0.3rem;
        color: #525a6d;
        justify-content: center;
        align-items: center;
    }

    .message.success {
        background-color: #effff4;
        color: #41bf70;
        border: #41bf70 0.015rem solid;
    }

    .message.error {
        background-color: #feefe7;
        color: #e54122;
        border: #e54122 0.015rem solid;
    }

    /* 可以设置不同的进入和离开动画 */
    /* 设置持续时间和动画函数 */

    .message.slide-fade-enter-active {
        transition: all 0.5s ease;
    }

    .message.slide-fade-leave-active {
        transition: all 0.5s ease;
        // transition: all 0.8s cubic-bezier(1, 0.5, 0.8, 1);
    }

    .message.slide-fade-enter, .slide-fade-leave-to
    /* .slide-fade-leave-active for below version 2.1.8 */ {
        transform: translateY(-20px);
        opacity: 0;
    }
}

.blink::after {
    content: '';
    display: block;
    width: 0.1rem;
    height: 0.8rem;
    position: relative;
    top: 0.2rem;
    left: 0.45rem;
    border-radius: 0.5rem;
    background-color: #40475b;
    animation-name: blink;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
    animation-timing-function: cubic-bezier(0.75, 0, 0.25, 1);
    animation-duration: 1.2s;
}

@keyframes blink {
    0% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

.button {
    width: 80%;
    height: 1rem;
    font-size: 0.3rem;
    line-height: 0.3rem;
}

.ivu-input-wrapper {
    input {
        height: 150px;
        font-size: 60px;
    }
}

.ivu-message {
    display: none !important;
}
.inTouch {
    -webkit-overflow-scrolling: auto;
}
.noTouch {
    -webkit-overflow-scrolling: touch;
}
.form {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.title {
    margin-top: 3.5rem;
    font-size: 0.7rem;
    color: white;
    margin-bottom: 2.5rem;
}

.footer {
    margin-top: 3rem;
    color: white;
    font-size: 0.25rem;
}
</style>
